﻿:root {
    --accent-color: cornflowerblue;
    --bright-color: snow;
    --second-bright-color: #eee;
    --dark-color: #222;
    --second-dark-color: #333;
    --middle-color: gray;
    --second-middle-color: darkgray;
    --header-height: 4rem; /*页眉高度*/
    --type-area-width: 80rem; /*版心宽度*/
    --banner-bg-image: url(https://i.imgs.ovh/2025/09/24/7gMFCe.jpeg);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

a, i, li {
    transition: transform 200ms, text-shadow 200ms, padding 200ms, color 200ms;
}

body {
    background-color: var(--dark-color);
    font: normal normal 400 1rem/1.5 'SF Pro', 'San Francisco', Helvitica, 'Noto Sans SC', 'PingFang SC';
}

input[type="text"] {
    outline: none;
    background-color: var(--dark-color);
    font: normal normal 400 1rem/1.5 'SF Pro', 'San Francisco', Helvitica, 'Noto Sans SC', 'PingFang SC';
}

a {
    text-decoration: none;
    color: var(--bright-color);
}

a.invalid {
}

li {
    list-style: none;
}

button {
    border: none;
}

.type-area {
    max-width: var(--type-area-width);
    margin: 0 auto;
}

.anchor-target {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

header {
    position: fixed;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    height: var(--header-height);
    background-color: var(--second-dark-color);
    box-shadow: 0 .2rem 1rem var(--dark-color);

    img.logo {
        height: 4rem;
        padding: .2rem .5rem 0 1rem;
        object-fit: cover;
        background-color: var(--second-bright-color);
        border-radius: 0 .25rem .25rem 0;
    }

    nav {
        flex-grow: 1;
        height: 100%;

        ul {
            display: flex;
            align-items: center;
            gap: 2rem;
            height: 100%;

            li {
                height: 100%;
            }

            li a {
                display: flex;
                align-items: center;
                height: 100%;
                text-wrap: nowrap;
            }

            li a.active {
                color: var(--accent-color);
            }

            li a:hover {
                color: var(--accent-color);
            }
        }

        .active-underline {
            position: absolute;
            bottom: 0;
            width: 2rem;
            height: .4rem;
            background-color: var(--accent-color);
            transition: 200ms;
        }
    }

    .search {
        display: flex;
        height: 3rem;

        input {
            width: 15rem;
            height: 100%;
            padding: 0 .5rem;
            border: 3px solid cornflowerblue;
            border-right: none;
            color: cornflowerblue;
        }

        button {
            width: 3rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: cornflowerblue;

            i {
                font-size: 1.2rem;
                color: var(--bright-color);
            }
        }

        button:active {
            background-color: royalblue;
        }
    }

    .user {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .5rem;
        background-color: var(--second-bright-color);
        border-radius: .25rem 0 0 .25rem;

        img.avatar {
            width: 3rem;
            height: 3rem;
            border-radius: .25rem;
        }

        p.uname {
            text-wrap: nowrap;
            color: var(--second-dark-color);
        }
    }
}

.header-placeholder {
    height: var(--header-height);
}

#banner {
    position: relative;
    width: 100%;
    background-image: var(--banner-bg-image);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;

    .type-area {
        position: relative;
        height: 30rem;
        background-color: rgba(0, 0, 0, .4);

        > * {
            /*border: 1px solid crimson;*/
        }

        nav {
            position: absolute;
            display: flex;
            width: 12rem;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            text-wrap: nowrap;
            z-index: 1;

            ul {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;

                li {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: .25rem 1rem;
                    color: var(--bright-color);
                    cursor: pointer;

                    + li {
                        border-top: 1px dashed var(--middle-color);
                    }

                    i {
                        font-size: 1.2rem;
                    }
                }

                li:hover {
                    background-color: var(--second-dark-color);
                    padding: .25rem 1.2rem;

                    a, i {
                        color: var(--accent-color);
                    }
                }
            }
        }

        .bg-info {
            position: absolute;
            bottom: 0;
            right: 1rem;
            display: flex;
            align-items: baseline;
            gap: .2rem;
            color: var(--bright-color);
            text-shadow: 0 0 .5rem var(--second-dark-color);
            text-wrap: nowrap;

            .bg-author, .bg-title {
                font-weight: normal;
            }

            .bg-author {
                font-size: 2rem;
            }

            .bg-title {
                font-size: 3rem;
            }
        }
    }
}

#friend-links {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    background: linear-gradient(
            45deg,
            rgba(128, 45, 198, 1) 0%,
            rgba(160, 98, 213, 1) 35%,
            rgba(191, 130, 239, 1) 100%
    );
    border-top: 1px dashed var(--second-bright-color);
    border-radius: 0 0 .25rem .25rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
    color: var(--bright-color);
    text-wrap: nowrap;

    .title {
        color: violet;
        font-weight: normal;
    }

    ul {
        flex-grow: 1;
        display: flex;
        flex-wrap: wrap;

        li {
            display: flex;
            align-items: center;
            gap: .2rem;
            padding: 0 .5rem;
            border-left: 1px dashed var(--second-bright-color);
            cursor: pointer;
        }
    }

    .refresh {
        a i {
            animation: spin 2s linear infinite;
        }

        a div {
            transition: 200ms;
        }

        a:active div {
            transform: translateY(3px);
        }
    }

    ul li:hover, .refresh:hover {
        text-shadow: 0 0 .2rem var(--second-dark-color);
    }
}

.ror-box {
    margin-top: 3rem;
    padding: 0 2rem;

    .box-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;

        .title {
            font-size: 2rem;
            font-weight: normal;
            color: var(--bright-color);
        }

        a.see-more {
            color: var(--middle-color);
        }

        a.see-more:hover {
            color: var(--accent-color);
        }
    }

    .box-body {
        margin-top: .5rem;

        .box-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 20rem;
            border: 2px dashed var(--middle-color);
            border-radius: .25rem;
            background-color: var(--dark-color);
            color: var(--middle-color);

            i {
                font-size: 3rem;
            }

            .title {
                font-size: 1rem;
            }
        }

        ul.exhibit-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));

            gap: .5rem;

            li {
                .item {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    border-radius: .25rem;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
                    overflow: hidden;

                    .item-placeholder {
                        position: absolute;
                        inset: 0;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        gap: 1rem;
                        padding: 0 1rem 0 1.5rem;
                        background-color: var(--middle-color);
                        color: var(--second-bright-color);
                        text-wrap: nowrap;

                        i {
                            font-size: 2rem;
                            animation: spin 2s ease-in-out infinite;
                        }

                        p {
                            text-align: center;
                        }
                    }

                    .image {
                        display: flex;

                        img {
                            width: 100%;
                            object-fit: contain;
                            background-color: var(--middle-color);
                            color: var(--dark-color);
                        }
                    }

                    .info {
                        display: flex;
                        flex-direction: column;
                        padding: .5rem 1rem;
                        background-color: var(--second-dark-color);
                        border-top: 1px dashed var(--middle-color);
                        text-wrap: nowrap;

                        .title {
                            font-size: 1.1rem;
                            font-weight: normal;
                            color: var(--second-bright-color);
                        }

                        .desc {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            > * {
                                font-size: .9rem;
                                color: var(--middle-color);
                            }

                            .category {
                                color: var(--accent-color);
                            }

                            .separator {
                            }

                            .file-type {
                                font-weight: bold;
                                color: var(--middle-color);
                            }
                        }
                    }
                }
            }
        }
    }
}

.blank-river {
    height: 20rem;
}

#about {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 4rem 10rem;
    background-color: var(--second-dark-color);
    border-top: 1px dashed var(--middle-color);

    .copyright {
        img.logo {
            height: 5rem;
            margin-bottom: 1rem;
            border: 1px dotted var(--second-dark-color);
            background-color: var(--second-bright-color);
        }

        p {
            color: var(--middle-color);
        }

        a, .emphasized {
            color: var(--second-middle-color);
        }

        a:hover {
            color: var(--accent-color);
        }
    }

    .links {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;

        dl {
            max-width: 20rem;
            margin-left: .5rem;

            dt {
                margin-left: -.5rem;
                text-wrap: nowrap;
                line-height: 2;
                font-size: 1.5rem;
                color: var(--middle-color);
            }

            dd {
                display: inline-flex;
                align-items: center;
                margin-right: .5rem;
                line-height: 1.8;

                a, i {
                    color: var(--second-middle-color);
                }
            }

            dd:hover {
                a, i {
                    color: var(--accent-color);
                }
            }
        }
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1000px) {
    header {
        padding-left: 1rem;

        img.logo {
            display: none;
        }
        nav ul {
            gap: .9rem;
        }
    }
}